<template>
  <view class="content">
    <video
      class="firvid"
      id="myVideo"
      :src="video_url"
      @error="videoErrorCallback"
      :danmu-list="danmuList"
      enable-danmu
      danmu-btn
      controls
    ></video>
    <!-- 店铺图 -->
    <!-- <view class="view name"> </view> -->

    <!-- 设备名称 -->
    <view class="viewall">
      <u-avatar :src="pic"></u-avatar>
      <u--text class="title" :text="name"></u--text>
    </view>
    <view class="middcon">
      <!-- 设备信息 -->
      <view class="view">
        {{ info }}
      </view>
      <!-- 描述 -->
      <view class="view description">
        {{ description }}
      </view>
    </view>
    <!-- 其他视频展示 -->

    <view class="u-demo-block">
      <text class="u-demo-block__title">其他监控展示</text>
      <u-swiper
        :list="videoarr"
        previousMargin="30"
        nextMargin="30"
        circular
        keyName="img"
        @click="handleVideoID"
        :autoplay="true"
        radius="5"
        bgColor="#ffffff"
      ></u-swiper>
    </view>
    <u-toast ref="uToast"></u-toast>

    <!-- <view class="scollcontion">
	
			<u-swiper class="test" :list="videoarr" keyName="index" :autoplay="false">
				<view class="item" @tap="handleVideoID(index)" v-for="(item, index) in videoarr" :key="index">
					<image class='img' :src="item.img" mode="scaleToFill "></image>
				</view>
			</u-swiper>

		</view> -->
  </view>
</template>

<script>
// import { getShopsDetail, getShopInfo } from "@/api/index";
const { loginUrl, getDetailUrl } = require("../../utils/interfaceUrl.js");
export default {
  data() {
    return {
      middconheight: "",
      firvidheight: "",
      viewallheigth: "",
      scollcontionheight: "",
      pic: "",
      name: "", //店铺名称
      info: "", //设备信息
      description: "", //设备描述
      videoarr: [],
      id: "",
      video_url:
        "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
    };
  },
  onLoad() {
    this.getLocation();
  },

  methods: {
    // 获取位置信息
    getLocation: function() {
      let _this = this;
      uni.getLocation({
        type: "wgs84",
        success: function(res) {
          _this.getInfo(res.longitude, res.latitude);
        }
      });
    },
    handleVideoID(index) {
      console.log("handleVideoID -> index", index, this.video_url);
      this.video_url = this.videoarr[index].video_url;
    },

    // 请求店铺数据
    getInfo: function(longitude, latitude) {
      // this.$refs.uToast.show({
      //   type: "error",
      //   icon: false,
      //   title: 1234567890567876545678,
      //   message: "aaaa",
      //   iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
      //   duration: 1000000
      // });
      uni.request({
        url: getDetailUrl,
        data: {
          s_id: 5,
          longitude,
          latitude
        },
        header: {},
        success: res => {
          console.log(res.data);
          this.pic = res.data.data.imgs;
          this.name = res.data.data.name;
          this.description = res.data.data.introduction;
          this.videoarr = res.data.data.shop_device;
          // this.$refs.uToast.show({
          //   type: "error",
          //   icon: false,
          //   title: res.data.data.introduction,
          //   message: "一弦一柱思华年",
          //   iconUrl: "https://cdn.uviewui.com/uview/demo/toast/error.png",
          //   duration: 1000000
          // });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  margin: 20rpx;
}

#myVideo {
  width: 100%;
}

.middcon {
  overflow-y: auto;
  height: calc(100vh - 470px);
  background: #f1f1f1;
  border-radius: 20rpx;
  margin-top: 10rpx;
}

.view {
  width: 100%;
  line-height: 80rpx;
  font-size: 40rpx;
  text-indent: 20rpx;
}

// 名称头像
.viewall {
  margin-top: 20rpx;
  display: flex;
  justify-content: end;
  width: 90%;
  line-height: 80rpx;
  font-size: 40rpx;
  text-indent: 20rpx;
}

.info {
  font-size: 30rpx;
  line-height: 60rpx;
}

.description {
  font-size: 26rpx;
  line-height: 60rpx;
  // 超出隐藏
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // height: 100rpx;
  // width: 100%;
}

.scollcontion {
  height: 220rpx;
  margin: 20rpx 20rpx 20rpx 0;
  position: fixed;
  left: 20rpx;
  bottom: 20rpx;
  overflow: hidden;
}

.test {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}

.test .item {
  background: red;
  float: left;
  margin-right: 20rpx;
  width: 250rpx;
  display: inline-block;
  position: relative;
}

.img {
  width: 200rpx;
}
.u-demo-block__title {
  margin: 20rpx;
  font-weight: 900;
  display: block;
}
</style>
